<div>
  <d-button bsStyle="common" (click)="loadMenu = !loadMenu" style="margin-right: 4px">Async load menu</d-button>
  <d-button bsStyle="common" (click)="loadContent = !loadContent">Async load content</d-button>
  <div
    dAnchorBox
    [view]="{ top: 180, bottom: 0 }"
    [defaultAnchor]="'base-info'"
    class="mymain"
    style="position: relative; min-height: 220px"
  >
    <div class="mysidebar" *ngIf="loadMenu">
      <d-sticky [view]="{ top: 180, bottom: 0 }">
        <ul class="step-nav">
          <li [dAnchorLink]="'base-info'" anchorActive="active">Basic Infomation</li>
          <li [dAnchorLink]="'issue-list'" anchorActive="active">Demand List</li>
          <li [dAnchorLink]="'case-list'" anchorActive="active">Case List</li>
          <li [dAnchorLink]="'quarlity-result'" anchorActive="active">Quality Assessment</li>
        </ul>
      </d-sticky>
    </div>
    <div class="mycontent" *ngIf="loadContent">
      <div [dAnchor]="'base-info'" class="section-block">
        <h3 class="devui-h3-title">Basic Infomation</h3>
        Show basic infomation here.
      </div>
      <div [dAnchor]="'issue-list'" class="section-block">
        <h3 class="devui-h3-title">Demand List</h3>
        Show demand list here.
      </div>
      <div [dAnchor]="'case-list'" class="section-block">
        <h3 class="devui-h3-title">Case List</h3>
        Show case list here.
      </div>
      <div [dAnchor]="'quarlity-result'" class="section-block">
        <h3 class="devui-h3-title">Quality Assessment</h3>
        Show quality assessment here.
      </div>
    </div>
  </div>
</div>
